<template>
	<view class="mine">
		<view class="mine_head">
			<uni-nav-bar statusBar :border="false"></uni-nav-bar>
			<view class="user_info" v-if="userInfo">
				<image :src="getAvatar()" mode="aspectFill" />
				<view class="" style="flex: 1;">
					<view class="user_name">Hi~, {{ userInfo.nickname }}</view>
					<view class="teacher_tag" v-if="userInfo&&userInfo.isPromoter">
						<image src="../../static/mine/renzheng.png" mode=""></image>
						<view class="tag_name">教师</view>
					</view>
					<view class="user_phone" v-else>{{ userInfo.phone }}</view>
				</view>
				<view class="scan_btn" @tap="scan" v-if="userInfo&&userInfo.isPromoter">
					<image src="../../static/mine/saoyisao.png" mode=""></image>
					<view class="">扫一扫</view>
				</view>
			</view>
			<view class="user_info" v-else>
				<image :src="getAvatar()" mode="aspectFill" />
				<view class="">
					<view class="user_name" @click="$to('/pages/login')">去登录</view>
				</view>
			</view>
		</view>
		<view class="mine_contnet">
			<view class="my_orders">
				<block v-for="item in orderType" :key="item.val">
					<view class="type_item" @tap="clickOrder(item.val)">
						<image :src="'../../static/mine/'+item.icon" mode=""></image>
						<view class="">{{item.name}}</view>
					</view>
				</block>
			</view>
			<view class="links">
				<block v-for="(item,index) in links" :key="index">
					<button class="link_item link-btn" open-type="contact" @tap="linkTo(item)" v-if="item.type == 1">
						<image class="link_icon" :src="'../../static/mine/'+item.icon" mode=""></image>
						<view class="link_title t-l">{{item.name}}</view>
						<image class="more_icon" src="../../static/mine/gengduo.png" mode=""></image>
					</button>
					<view class="link_item" @tap="linkTo(item)" v-else>
						<image class="link_icon" :src="'../../static/mine/'+item.icon" mode=""></image>
						<view class="link_title">{{item.name}}</view>
						<image class="more_icon" src="../../static/mine/gengduo.png" mode=""></image>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType: [{
						name: '全部',
						val: 0,
						icon: 'quanbu.png'
					},
					{
						name: '待出行',
						val: 1,
						icon: 'daichuxing.png'
					},
					{
						name: '已出行',
						val: 2,
						icon: 'yichuxing.png'
					},
					{
						name: '售后',
						val: -3,
						icon: 'shouhou.png'
					},
				],
				links: [{
						name: '我的发布',
						icon: 'fabu.png',
						url: 'myRelease',
						type: 0
					},
					{
						name: '我的评论',
						icon: 'pinlun.png',
						url: 'myComment',
						type: 0
					},
					{

						name: '学生信息',
						icon: 'student.png',
						url: 'studentList',
						type: 0
					},
					{
						name: '优惠券',
						icon: 'youhuiquan.png',
						url: 'myCoupon',
						type: 0
					},
					{
						name: '问题反馈',
						icon: 'fankui.png',
						url: 'feedback',
						type: 0
					},
					{
						name: '在线客服',
						icon: 'kefu.png',
						url: 'customerService',
						type: 1
					},
					{
						name: '设置',
						icon: 'shezhi.png',
						url: 'setUp',
						type: 0
					}
				],
				userInfo: null,
				avatar: '',
				sex: '',
				nickName: '',
				isClose: false,
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getAvatar() {
				return this.userInfo?.avatar
			},
			clickOrder(type) {
				uni.navigateTo({
					url: '/pages/mine/myOrder/myOrder?type=' + type
				})
			},
			linkTo(item) {
				if (item.url === 'studentList') {
					this.$to(`/pages/index/studentList/studentList?pagetype=我的`)
				} else if (item.url == 'customerService') {


				} else {
					this.$to(`/pages/mine/${item.url}/${item.url}`)
				}
			},
			async getUserInfo() {
				let res = await this.$api.get('user');
				console.log(res);
				if (res.code == 200) {
					this.userInfo = res.data;
				}else if(res.code == 401){
					this.userInfo = null;
					var that = this;
					if(!that.isClose) {
						uni.showModal({
							title: '提示',
							content: '当前页面需登录后体验，请先登录',
							success: (t) => {
								if(t.confirm) {
									uni.navigateTo({
										url: '/pages/login'
									})
								}else if(t.cancel) {
									that.isClose = true
								}
							}
						})
					}
				}
			},
			scan() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url:'/pages/mine/writeOff/writeOff?orderId='+res.result
						})
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
	}

	.mine {
		.mine_head {
			width: 100%;
			background: linear-gradient(to bottom right, #DAF4FD, #F7F7F7);
			margin-bottom: 20rpx;

			/deep/.uni-navbar {
				opacity: 0;
			}

			.user_info {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				padding: 36rpx 42rpx 48rpx;
				box-sizing: border-box;

				>image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 28rpx;
					background-color: #fff;
				}

				>view {
					.user_name {
						font-size: 36rpx;
						line-height: 36rpx;
						font-weight: bold;
						margin-bottom: 12rpx;
					}

					.user_phone_btn {
						padding: 0;
						margin: 0;
						background-image: linear-gradient(to right, #00ddd8, #418ee0);
						border-radius: 12rpx;
						height: 68rpx;
						padding: 0 20rpx;
						line-height: 68rpx;
						font-size: 30rpx;
						color: #FFF;
					}

					.user_phone {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #999999;
					}
				}

				.teacher_tag {
					width: 130rpx;
					height: 46rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
					}

					.tag_name {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						font-size: 24rpx;
						color: #F76519;
						padding-left: 62rpx;
						line-height: 46rpx;
					}
				}

				.scan_btn {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-left: 20px;

					image {
						width: 34rpx;
						height: 34rpx;
						margin-bottom: 10rpx;
					}

					view {
						font-size: 20rpx;
						line-height: 20rpx;
						color: #4D4D4D;
					}
				}
			}
		}

		.mine_contnet {
			padding: 0 26rpx;
			box-sizing: border-box;

			.my_orders {
				width: 100%;
				height: 146rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 54rpx;
				box-sizing: border-box;
				margin-bottom: 34rpx;

				.type_item {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 54rpx;
						height: 54rpx;
						margin-bottom: 16rpx;
					}

					view {
						font-size: 24rpx;
						line-height: 24rpx;
						font-weight: bold;
					}
				}
			}

			.links {
				background-color: #fff;
				border-radius: 20rpx;

				button::after {
					border: none;
				}

				.link-btn {
					margin: 0;
					padding: 0;
					background-color: #fff;
					line-height: 1;
				}

				.t-l {
					text-align: left;
				}

				.link_item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 36rpx 30rpx;
					box-sizing: border-box;

					.link_icon {
						width: 36rpx;
						height: 36rpx;
					}

					.link_title {
						font-size: 28rpx;
						font-weight: 400rpx;
						margin: 0 22rpx;
						flex: 1;
					}

					.more_icon {
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}

	}
</style>